<style lang="sass" scoped>
    .container{
        background:#ccc;
        display:flex;
        justify-content: center;
        align-items: center;
        .login-box{
            width:500px;
            height:350px;
            background:#fff;
            border-radius:10px;
            .title{
                font-size: 20px;
                text-align: center;
                height: 60px;
                line-height: 60px;
            }
            .form{
                padding:15px 50px 15px 15px;
            }
            .btns{
                text-align: center;
            }
        }
    }
</style>

<template>
	<div class="container">
		<div class="login-box">
            <div class="title">PGC书城管理系统</div>
            <div class="form">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="用户名：" prop="account">
                        <el-input v-model="ruleForm.account"  class="w-300"></el-input>
                    </el-form-item>
                    <el-form-item label="密码：" prop="pwd">
                        <el-input v-model="ruleForm.pwd" type="password" class="w-300 mr20"></el-input><span>{{pswText}}</span>
                    </el-form-item>
                    <!-- <el-form-item label="验证：" prop="pwd">
                        <el-input v-model="ruleForm.imgCode" type="password" class="w-200 mr20"></el-input>
                        <img @click="getImageCode()" v-if="verifyImg" id="v_container" :src="verifyImg" style="width: 100px;height: 40px;display:inline-block;vertical-align:middle;"></img> 
                    </el-form-item> -->
                </el-form>
            </div>
            <div class="btns">
                <el-button
                    @click="login('ruleForm')" 
                    type="primary">登陆</el-button>
            </div>
        </div>
	</div>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
                ruleForm: {
                    account: '',
                    pwd:'',
                    // imgCodeId:'',//	是	string	图片验证码ID
                    // imgCode:'',//	是	string	用户输入的验证码
                },
                rules:{
                    account: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                    ],
                    pwd: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ],
                },
                pswText:'',
                verifyImg:'',
                // verifyObj:null,
                // verifyCode:'',
			};
		},
		computed: {},
		created() { 
        },
        watch:{
            'ruleForm.pwd'(val) {
                let number = /[0-9]/
                let max = /[A-Z]/;
                let min = /[a-z]/;
                let special = /[~'!@#￥$%^&*()-+_.=:]/;
                let lev = 1;
                if (val == '') {
                    this.pswText = ''
                } else {
                    if (number.test(val)) {
                        lev = lev + 1
                    }
                    if (max.test(val)) {
                        lev = lev + 1
                    }
                    if (min.test(val)) {
                        lev = lev + 1
                    }
                    if (special.test(val)) {
                        lev = lev + 1
                    }
                }
                if (lev == 2) {
                    this.pswText = '低'
                }
                else if (lev == 3 || lev == 4) {
                    this.pswText = '中'
                }
                else if (lev == 5) {
                    this.pswText = '高'
                }
            },
        },
		mounted() {
			this.$nextTick(() => {
                // this.verifyObj = new gVerify('v_container');
                // this.getImageCode();
			});
		},
		methods: {
            // getImageCode(){
            //     util.ajax({
            //         url:config.baseApi + 'sc-manage/api/common/getImageCode',
            //         success:(data=>{
            //             this.ruleForm.imgCodeId = data.data.imgCodeId;
            //             this.verifyImg = data.data.url;
            //         })
            //     })
            // },
			login(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        // var panduan = this.verifyObj.validate(this.verifyCode)
                        // if(panduan){
                            let param = JSON.parse(JSON.stringify(this.ruleForm));
                            util.ajax({
                                url: config.baseApi + 'bookMall-admin/api/login/login',
                                data: param,
                                isLogin:true,
                                success: (data => {
                                    util.setCookie(data.data.cookieName,data.data.token,7);
                                    util.setCookie('userMsg',JSON.stringify(data.data));
                                    util.setStorage('local','jurisdnArrs',[])
                                    server.getUserInfo().then(res=>{
                                        console.log(res)
                                        util.setStorage('local', 'user', JSON.stringify(res))
                                        if(res.level==='root'){
                                            router.push({name:'user_list'});
                                        }else{
                                            this.getAccessCode().then(()=>{
                                                router.push({name:'product_list'})
                                            })
                                        }
                                    })
                                })
                            })
                        // }else{
                        //     popup.alert({content:'验证码有误，请重新输入验证码！'});
                        // }
                    } else {
                        return false;
                    }
                });
                
            },
            getAccessCode(){
                return new Promise((res,ret)=>{
                    util.ajax({
                        url:config.baseApi + 'bookMall-admin/api/user/getAccessCode',
                        data:{
                        },
                        success:(data=>{
                            data.data&&util.setStorage('local','jurisdnArrs',data.data);
                            res();
                        })
                    })
                })
            }
		}
	};
</script>